import React from 'react';
import { Button, Switch } from '@teamix/ui';
import track from 'utils/track';
import ServiceTipsModal from './serviceTipsModal';
import intl from '../../../../../../../../../../locale';

export default class MonitorTable extends React.Component {
  onChange = (value) => {
    this.props.updateSensitiveSetting({
      is_sensitive_behavior_enable: value,
    });

    track({
      action: `turn_${value ? 'on' : 'off'}_switch`,
      page: 'Organization-Settings-Risk Control',
      type: 'Sensitive Behavior monitoring',
    });
  };

  render() {
    const { is_sensitive_behavior_enable } = this.props;
    return (
      <div className="risk-section monitor-switch">
        <div className="monitor-switch-left">
          <div className="monitor-switch-left-title">
            {intl.get({
              id: 'code-assets.containers.sensitiveBehaviorMonitor.switch.SensitiveBehaviorMonitoring',
              defaultMessage: '启用敏感行为监测',
            })}
          </div>
          <div className="monitor-switch-left-description">
            <span>
              {intl.get({
                id: 'code-assets.containers.sensitiveBehaviorMonitor.switch.ProvideDynamicMonitoringOfAbnormal',
                defaultMessage: '基于用户历史行为数据通过智能算法提供异常性敏感行为动态监测',
              })}
            </span>
            <ServiceTipsModal
              trigger={
                <Button type="primary" text className="monitor-switch-left-description-help">
                  {intl.get({
                    id: 'code-assets.containers.sensitiveBehaviorMonitor.switch.ServiceDescription',
                    defaultMessage: '服务说明',
                  })}
                </Button>
              }
            />
          </div>
        </div>
        <div className="monitor-switch-right">
          <Switch checked={is_sensitive_behavior_enable} onChange={this.onChange} />
        </div>
      </div>
    );
  }
}
